<template>
  <div class="overview">
    <route-location></route-location>
    <div class="overview_container" v-loading="overview_loading">
      <div class="overview_container_left">
        <div class="overview_container_left_top">
          <div class="overview_container_left_top_title">
            <p style="font-weight: 700;color: #32406B">迁移流程向导</p>
          </div>
          <div class="overview_container_left_top_content">
            <div class="overview_container_left_top_content_box" v-for="(item,index) in guid_list">
              <div style="position: absolute;top: 5%">
                <i :class="item.icon" class="f-s-40" :style="{color: item.color}"></i>
              </div>
              <div class="point_line_box" v-if="index !== guid_list.length - 1">
                <div class="point_line" v-for="item in 6">
                  <span style="display: none">{{item}}</span>
                </div>
              </div>
              <p style="font-weight: 700;color: #32406B;position: absolute;top: 55%">{{ item.label }}</p>
              <span style="font-size: 12px;color: #9EA7B4;position: absolute;top: 70%">{{ item.desc }}</span>
            </div>
          </div>
        </div>
        <div class="overview_container_left_center">
          <div class="center_card" v-for="item in center_list">
            <div class="center_card_title">
              <span style="font-weight: 700;color: rgb(50, 64, 107);">{{ item.title }}</span>
              <i class="iconfont i-xiangyou1" style="cursor: pointer" @click="toAction(item.action)"></i>
            </div>
            <div class="center_card_container">
              <div class="center_card_container_left">
                <p style="font-weight: 700;color: #32406B">{{ item.value.left.title }}</p>
                <p class="base_title">{{ item.value.left.p1 }}</p>
                <el-progress :percentage="item.value.left.p1_value"
                             :show-text="false"
                             :color="item.p1_color"></el-progress>
                <p class="base_title">{{ item.value.left.p2 }}</p>
                <el-progress :percentage="item.value.left.p2_value"
                             :show-text="false"
                             :color="item.p2_color"></el-progress>
              </div>
              <div class="center_card_container_right" :id="item.action"></div>
            </div>
          </div>
        </div>
        <div class="overview_container_left_bottom">
          <div class="center_card" style="width: 32.5%">
            <div class="center_card_title">
              <span style="font-weight: 700;color: rgb(50, 64, 107);">迁移数据压缩</span>
            </div>
            <div class="center_card_container">
              <div class="center_card_container_left_img">
                <span style="margin-bottom: 20%;font-weight: bold;font-size: 14px">压缩率</span>
                <div class="center_card_container_left_img_body">
                  <div class="lui-inner" :style="{height: migration_data_compression.compression_data}"></div>
                  <span
                    style="font-weight: 700;font-size: 18px;color: black;position: absolute;z-index: 999">{{ migration_data_compression.compression_data
                    }}</span>
                </div>
              </div>
              <div class="center_card_container_left_table">
                <div style="border-bottom: 1px solid #ececec;line-height: 40px">
                  <span style="font-weight: bold">类型</span><span style="font-weight: bold;margin-left: 40%">数据量</span>
                </div>
                <div style="border-bottom: 1px solid #ececec;line-height: 40px">
                  <span>需传输数据量</span><span style="margin-left: 19%">{{ migration_data_compression.actual_data }}</span>
                </div>
                <div style="border-bottom: 1px solid #ececec;line-height: 40px">
                  <span>实际传输量</span><span
                  style="margin-left: 25%">{{ migration_data_compression.to_migrated_data }}</span>
                </div>
              </div>
            </div>
          </div>
          <div class="center_card" style="width: 66%">
            <div class="center_card_title">
              <span style="font-weight: 700;color: rgb(50, 64, 107);">迁移任务统计</span>
            </div>
            <div class="center_card_container">
              <div class="migration_speed">
                <div v-for="item in migration_speed_list" :id="item.id"></div>
              </div>
              <div class="migration_time">
                <div class="migration_time_box" v-for="(item,index) in migration_time_list" :key="index">
                  <div class="time_box">
                    <div class="time_box_body">
                      <div class="time_box_body_split" v-for="(sonItem,sonIndex) in item.value.split(':')">
                        <div class="time_box_body_split_block" v-for="(miniItem,miniIndex) in sonItem.length" :key="miniItem + miniIndex">
                          {{ sonItem[miniIndex] }}
                        </div>
                        <span v-if="sonIndex!==2"
                              style="position: absolute;left: 98%;font-weight: 700;color: #19BE6B">:</span>
                        <span
                          style="position: absolute;font-size: 12px;top: 120%;left: 30%;color: #04C97C">{{ sonIndex === 0 ? "时" : sonIndex === 1 ? "分" : "秒"
                          }}</span>
                      </div>
                    </div>
                    <p style="font-size: 13px;font-weight: 700;margin-top: 17%">{{ item.title }}</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="overview_container_right">
        <div class="overview_container_right_top">
          <p style="font-weight: bold;line-height: 40px">快速入门</p>
          <div v-for="item in helper_list.quick_start" @click="getHelper(item)">
            <span class="link_item"><span style="color: red">*</span>{{ item.name }}</span>
          </div>
        </div>
        <div class="overview_container_right_bottom">
          <p style="font-weight: bold;line-height: 40px">常见问题帮助</p>
          <div v-for="item in helper_list.problem_help" @click="getHelper(item)">
            <span class="link_item"><span style="color: red">*</span>{{ item.name }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import RouteLocation from "@/components/RouteLocation";
import * as echarts from "echarts";
import { httpRequest } from "@/untils/httpRequest";
import { mixin } from "@/mixin/mixin";

export default {
  name: "Overview",
  mixins: [mixin],
  components: { RouteLocation },
  data() {
    return {
      guid_list: [
        {
          icon: "iconfont i-xiazaikehuduan",
          color: "#04C97C",
          label: "下载安装客户端",
          desc: "分别为源和目标机安装客户端和迁移启动介质。",
          action: "download_install_client"
        },
        {
          icon: "iconfont i-chuangjianqianyirenwu",
          color: "#FFBE00",
          label: "创建迁移任务",
          desc: "按硬件规格选择合适的目标机创建迁移任务。",
          action: "create_migration_task"
        },
        {
          icon: "iconfont i-tongbuyuanjishuju",
          color: "#FF834B",
          label: "同步源机数据",
          desc: "将源机数据以定时增量同步传输到目标机中。",
          action: "sync_source_data"
        },
        {
          icon: "iconfont i-qianyirenwuqiehuan",
          color: "#0078FF",
          label: "迁移任务切换",
          desc: "将源机系统及数据切换到目标机中。",
          action: "migration_task_change"
        }],
      center_list: [
        {
          title: "当前活动任务",
          p1_color: "#19BE6B",
          p2_color: "#FF834B",
          value: {
            left: {
              title: "迁移任务状态",
              p1: "正常:0",
              p1_value: 0,
              p2: "异常:0",
              p2_value: 0
            },
            right: {
              data: [
                { value: 0, name: "正常" },
                { value: 0, name: "异常" }
              ],
              title: {
                text: "0",
                subtext: "任务数",
                left: "center",
                top: "center",
                textStyle: {
                  fontSize: 36
                },
                subtextStyle: {
                  fontSize: 12,
                  color: "#9EA7B4",
                  lineHeight: 0
                },
                itemGap: 0
              }
            }
          },
          action: "active_task"
        },
        {
          title: "客户端在线状态",
          p1_color: "#19BE6B",
          p2_color: "#949494",
          value: {
            left: {
              title: "客户端状态",
              p1: "在线:0",
              p1_value: 0,
              p2: "离线:0",
              p2_value: 0
            },
            right: {
              data: [
                { value: 0, name: "在线" },
                { value: 0, name: "离线" }
              ],
              title: {
                text: "0",
                subtext: "客户端总数",
                left: "center",
                top: "center",
                textStyle: {
                  fontSize: 36
                },
                subtextStyle: {
                  fontSize: 12,
                  color: "#9EA7B4",
                  lineHeight: 0
                },
                itemGap: 0
              }
            }
          },
          action: "client_status"
        },
        {
          title: "已迁移客户端",
          p1_color: "#19BE6B",
          p2_color: "#FFC900",
          value: {
            left: {
              title: "客户端迁移详情",
              p1: "已完成迁移:0",
              p1_value: 0,
              p2: "未完成迁移:0",
              p2_value: 0
            },
            right: {
              data: [
                { value: 0, name: "已完成迁移" },
                { value: 0, name: "未完成迁移" }
              ],
              title: {
                text: "0%",
                subtext: "迁移成功率",
                left: "center",
                top: "center",
                textStyle: {
                  fontSize: 36
                },
                subtextStyle: {
                  fontSize: 12,
                  color: "#9EA7B4"
                },
                itemGap: 0
              }
            }
          },
          action: "clients_migrated"
        }
      ],
      migration_data_compression: {
        compression_data: "0%",
        actual_data: "0GB",
        to_migrated_data: "0GB"
      },
      migration_speed_list: [
        { title: "平均速度", id: "migration_speed_avg", value: "0" },
        { title: "最高速度", id: "migration_speed_max", value: "0" }
      ],
      migration_time_list: [
        { title: "平均耗时", value: "00:00:00" },
        { title: "最短耗时", value: "00:00:00" }
      ],
      helper_list: {
        quick_start: [
          { name: " 准备迁移源机与迁移目标机", tab_id: "00", page_id: "00_00_01" },
          { name: "  分别安装源机客户端与目标机客户端", tab_id: "01", page_id: "00_00_02" },
          { name: "  配置从源机到目标机的迁移任务", tab_id: "02", page_id: "00_00_03" },
          { name: "  同步源机数据到目标机中", tab_id: "03", page_id: "00_00_04" },
          { name: "  迁移任务执行切换", tab_id: "04", page_id: "00_00_05" }
        ],
        problem_help: [
          { name: "  如何安装迁移源机客户端", tab_id: "00", page_id: "00_00_01" },
          { name: "   源机客户端安装失败", tab_id: "01", page_id: "00_00_02" },
          { name: "   源机客户端安装后未上线到科力锐迁移云", tab_id: "02", page_id: "00_00_03" },
          { name: "   如何在目标机中使用迁移启动介质", tab_id: "03", page_id: "00_00_04" },
          { name: "   目标机以启动介质启动后未上线到科力锐迁移云", tab_id: "04", page_id: "00_00_05" },
          { name: "   目标机匹配度是什么", tab_id: "00", page_id: "00_00_01" },
          { name: "    选择不同匹配度的目标机做迁移任务有什么区别", tab_id: "01", page_id: "00_00_02" },
          { name: "    迁移任务同步数据失败", tab_id: "02", page_id: "00_00_03" },
          { name: "    迁移任务在同步数据阶段支持修改的任务配置", tab_id: "03", page_id: "00_00_04" },
          { name: "    迁移任务切换前对源机处置策略执行失败", tab_id: "04", page_id: "00_00_05" },
          { name: "     迁移任务切换失败", tab_id: "03", page_id: "00_00_04" },
          { name: "     迁移任务切换完成后显示目标机离线", tab_id: "04", page_id: "00_00_05" }
        ]
      },
      overview_loading: false
    };
  },
  methods: {
    getDataSource() {
      return new Promise((resolve) => {
        httpRequest("post", "/component/getOverview", null, null, "proxy").then((res) => {
          var data = res.data.data;
          if (res.data.code === 200) {
            this.center_list = data.center_list;
            this.migration_data_compression = data.migration_data_compression;
            this.migration_speed_list = data.migration_speed_list;
            this.migration_time_list = data.migration_time_list;
          }
          resolve();
        }).then(() => {
          this.listGenerateChart();
        }).finally(() => {
          this.overview_loading = false;
        });
      });
    },
    listGenerateChart() {
      this.center_list.forEach(item => {
        this.generateChart(item.action, item.value.right.data, item.p1_color, item.p2_color, item.value.right.title);
      });
      this.migration_speed_list.forEach(item => {
        this.generateMigrationTaskChart(item.id, item.title, item.value);
      });
    },
    generateChart(id, data, p1_color, p2_color, title) {
      let myChart = echarts.init(document.getElementById(id));
      let option = {
        title: title,
        tooltip: {
          trigger: "item",
          formatter: function(v) {
            return v.data.name + ":" + v.data.value;
          },
          confine: true
        },
        series: [
          {
            type: "pie",
            top: "1%",
            radius: ["54", "66"], // 饼图大小
            center: ["center", "center"], // 饼图位置
            label: { show: false },
            labelLine: {
              show: false
            },
            itemStyle: {
              borderColor: "#fff",
              borderWidth: 2
            },
            data: data
          }
        ],
        color: [p1_color, p2_color]
      };
      myChart.setOption(option);
      window.addEventListener("resize", () => {
        if (myChart) {
          myChart.resize();
        }
      });
    },
    generateMigrationTaskChart(id, title, value) {
      let myChart = echarts.init(document.getElementById(id));
      let option = {
        series: [
          {
            type: "gauge",
            color: "#1598FF",
            splitNumber: 5,
            progress: {
              show: true,
              width: 6,
              itemStyle: {
                color: "#1598FF"
              }
            },
            axisLine: {
              lineStyle: {
                width: 5
              }
            },
            axisTick: {
              show: false
            },
            splitLine: {
              length: 10,
              lineStyle: {
                width: 0
              }
            },
            radius: "55%",
            axisLabel: {
              distance: -40,
              color: "#999",
              fontSize: 12
            },
            anchor: {
              show: true,
              showAbove: true,
              size: 20,
              itemStyle: {
                borderWidth: 5,
                borderColor: "#1598FF"
              }
            },
            title: {
              show: true,
              offsetCenter: [0, "140%"],
              fontSize: 13,
              fontWeight: 700
            },
            detail: {
              valueAnimation: true,
              fontSize: 12,
              color: "#1598FF",
              offsetCenter: [0, "70%"],
              formatter: function(value) {
                return value + "MB/S";
              }
            },
            data: [
              {
                value: value,
                name: title
              }
            ]
          }
        ]
      };
      myChart.setOption(option);
      window.addEventListener("resize", () => {
        if (myChart) {
          myChart.resize();
        }
      });
    },
    toAction(path) {
      console.log("跳转", path);
    },
    getHelper(item) {
      console.log("toHelper", item);
    }
  },
  mounted() {
    this.overview_loading = true;
    this.timerFn("getDataSource", 3000, 'overview_loading');
  }
};
</script>

<style scoped lang="less">
.overview {
  width: 100%;
  height: 100%;

  .f-s-40 {
    font-size: 40px;
  }

  .base_title {
    font-weight: 700;
    color: #32406B;
  }

  .overview_container {
    width: 100%;
    height: calc(100% - 46px);
    overflow: auto;
    padding: 1%;
    display: flex;
    justify-content: space-between;
    background-color: rgba(241, 245, 248, 1);

    .overview_container_left {
      width: 76%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .overview_container_left_top {
        background-color: #FFFFFF;
        width: 100%;
        height: 24%;
        border-radius: 2px;

        .overview_container_left_top_title {
          width: 100%;
          height: 20%;
          border-bottom: 1px solid #f3f3f3;
          padding: 0 20px;
          display: flex;
          align-items: center;
        }

        .overview_container_left_top_content {
          width: 100%;
          height: 80%;
          padding: 0 1% 0 3%;
          display: flex;

          .overview_container_left_top_content_box {
            width: 25%;
            height: 100%;
            position: relative;

            .point_line_box {
              width: 70%;
              height: 5px;
              position: absolute;
              top: 23%;
              left: 20%;
              display: flex;
              justify-content: space-between;
              align-items: center;

              .point_line {
                width: 5px;
                height: 5px;
                background-color: #b4b4b4;
                border-radius: 50%;
              }
            }
          }
        }
      }

      .overview_container_left_center {
        width: 100%;
        height: 35%;
        border-radius: 2px;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      .overview_container_left_bottom {
        width: 100%;
        height: 35%;
        border-radius: 2px;
        display: flex;
        justify-content: space-between;
      }

      .center_card {
        width: 32.5%;
        height: 100%;
        background-color: #FFFFFF;

        .center_card_title {
          width: 100%;
          height: 15%;
          border-bottom: 1px solid #f3f3f3;
          padding: 0 20px;
          display: flex;
          justify-content: space-between;
          align-items: center;
        }

        .center_card_container {
          width: 100%;
          height: 85%;
          display: flex;

          .center_card_container_left {
            width: 55%;
            height: 100%;
            display: flex;
            padding: 12% 5%;
            flex-direction: column;
            justify-content: space-around;
          }

          .center_card_container_left_img {
            width: 25%;
            height: 100%;
            margin-top: -3%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            .center_card_container_left_img_body {
              position: relative;
              width: 45%;
              height: 55%;
              background-color: rgba(0, 199, 159, 0.2);
              display: flex;
              justify-content: center;
              align-items: center;
            }

            .center_card_container_left_img_body:before {
              position: absolute;
              content: '';
              display: block;
              height: 10%;
              width: 100%;
              border-radius: 50%;
              top: -7%;
              z-index: 1;
              background: linear-gradient(to top, #2275EF, #35C486);
            }

            .center_card_container_left_img_body:after {
              position: absolute;
              content: '';
              display: block;
              height: 10%;
              width: 100%;
              border-radius: 50%;
              top: 95%;
              background: linear-gradient(to top, #2275EF, #3794CD);
            }

            .lui-inner {
              position: absolute;
              bottom: 0;
              width: 100%;
              height: 30%;
              background-image: linear-gradient(to top, #3794CD, #85D9B6);
              text-align: center;
            }

            .lui-inner::before {
              position: absolute;
              content: '';
              display: block;
              height: 12px;
              width: 100%;
              background: linear-gradient(to top, #2275EF, #35C486);
              border-radius: 50%;
              top: -8px;
              z-index: 1;
            }

            .lui-inner:after {
              position: absolute;
              content: '';
              display: block;
              height: 15px;
              width: 100%;
              border-radius: 50%;
              background-color: white;
              bottom: -10px;
            }
          }

          .center_card_container_left_table {
            width: 75%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 15% 5%;
          }

          .center_card_container_right {
            width: 45%;
            height: 100%;
          }

          .migration_speed {
            width: 50%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;

            #migration_speed_avg {
              width: 50%;
              height: 100%;
            }

            #migration_speed_max {
              width: 50%;
              height: 100%;
            }
          }

          .migration_time {
            width: 50%;
            height: 100%;
            border-left: 1px solid #f3f3f3;
            display: flex;
            justify-content: space-around;
            align-items: center;

            .migration_time_box {
              width: 46%;
              height: 100%;
              padding-top: 5%;
              display: flex;
              align-items: flex-end;
              justify-content: center;

              .time_box {
                width: 94%;
                height: 80%;
                display: flex;
                flex-direction: column;
                align-items: center;

                .time_box_body {
                  width: 100%;
                  height: 54%;
                  border-radius: 5%;
                  padding: 0 5%;
                  border: 1px solid #19BE6B;
                  background-color: #EDFBF5;
                  display: flex;
                  align-items: center;
                  justify-content: space-around;
                  font-size: 16px;

                  .time_box_body_split {
                    width: 30%;
                    height: 40%;
                    margin-top: -5%;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    position: relative;

                    .time_box_body_split_block {
                      width: 48%;
                      height: 100%;
                      border-radius: 5%;
                      background-color: #04C97C;
                      color: white;
                      display: flex;
                      align-items: center;
                      justify-content: center;
                    }
                  }
                }
              }
            }

            .migration_time_box:first-child {
              display: flex;
              justify-content: flex-end;
            }

            .migration_time_box:last-child {
              display: flex;
              justify-content: flex-start;
            }
          }
        }
      }
    }

    .overview_container_right {
      width: 23%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .overview_container_right_top, .overview_container_right_bottom {
        background-color: #FFFFFF;
        width: 100%;
        height: 30%;
        border-radius: 2px;
        padding: 3% 6%;
      }

      .overview_container_right_bottom {
        background-color: #FFFFFF;
        width: 100%;
        height: 68%;
        border-radius: 2px;
      }

      .link_item {
        line-height: 34px;
        cursor: pointer;
      }

      .link_item:hover {
        color: rgb(64, 158, 255);
      }
    }
  }

  @media screen and (max-width: 1680px) {
    .overview_container {
      width: 100%;
      height: calc(100% - 46px);
      overflow: auto;
      padding: 1%;
      display: flex;
      justify-content: space-between;
      background-color: rgba(241, 245, 248, 1);

      .overview_container_left {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }

      .overview_container_right {
        display: none;
        width: 0;
        height: 100%;
      }
    }
  }
}
</style>